<template>
  <div>
    <div class="topnav mb">
      <div>
        <el-badge :value="12" class="badgetag">
          <el-button type="primary">全部</el-button>
        </el-badge>
      </div>

      <div>
        <el-badge :value="12" class="badgetag">
          <el-button type="primary">待处理</el-button>
        </el-badge>
      </div>

      <div>
        <el-badge :value="12" class="badgetag">
          <el-button type="primary">跟进中</el-button>
        </el-badge>
      </div>

      <div>
        <el-badge :value="12" class="badgetag">
          <el-button type="primary">已签单</el-button>
        </el-badge>
      </div>

      <div>
        <el-badge :value="12" class="badgetag">
          <el-button type="primary">执行完</el-button>
        </el-badge>
      </div>

      <div>
        <el-badge :value="12" class="badgetag">
          <el-button type="primary">已黄单</el-button>
        </el-badge>
      </div>
    </div>

    <el-row type="flex" justify="space-between" :gutter="20">
      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
        <div class="indexleft">
          <div class="mb1">消息动态：</div>
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="projectName" label="项目名称">
            </el-table-column>

            <el-table-column prop="createTime" label="时间">
              <template slot-scope="scope">
                <div>{{formatterTime(scope.row.createTime)}}</div>
            </template>
            </el-table-column>

            <el-table-column prop="createTime" label="操作"> 
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      @click="handread(scope.row)"
                      >已读</el-button>

                      <el-button
                      size="mini"
                     
                      @click="handview(scope.row)"
                      >查看</el-button>

                      <el-button
                      size="mini"
                      type="primary"
                      @click="handconvert(scope.row)"
                      >转为代办</el-button>
                  </template>

            </el-table-column>
          </el-table>
        </div>
      </el-col>

      <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" >
        <div>
          <div class="mb1">我的待办：</div>
          <el-table :data="tableData2" style="width: 100%" border>
            <el-table-column prop="projectName" label="项目名称">
            </el-table-column>

            <el-table-column prop="createTime" label="时间">
              <template slot-scope="scope">
                <div>{{formatterTime(scope.row.createTime)}}</div>
            </template>
            </el-table-column>

            <el-table-column prop="createTime" label="操作"> 
              <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handread(scope.row)"
                    >已读</el-button>

                    <el-button
                    size="mini"
                    @click="handview(scope.row)"
                    >查看</el-button>
                </template>
          </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 111,
          projectName: "111的项目名称",
          createTime: 1755567912000,
        },
      ],
      tableData2: [
        {
          id: 111,
          projectName: "111的项目名称",
          createTime: 1755567912000,
        },
      ],
    };
  },

  methods:{
    handread(){
        console.log('点击了已读')
    },

    handview(){
        console.log('点击了查看')
    },

    handconvert(){
        console.log('点击了转为代办')
    },

    formatterTime(time) {
                return this.$moment(time).format("YYYY-MM-DD HH:mm:ss");
            },

  }
};
</script>

<style scoped>
  @import url('../../assets/styles/projectdetail.scss');
.topnav {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 按钮样式优化 */
.topnav div {
  margin: 0 10px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.topnav button:hover {
  transform: translateY(-2px); /* 轻微上浮 */
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2); /* 增强阴影 */
}
</style>
